<template>
  <el-table :data="userDetail">
    <el-table-column prop="key" width="100px">
      <template #header> </template>
    </el-table-column>
    <el-table-column prop="value" width="200px">
      <template #header> </template>
      <template #default="scope">
        <div>
          <el-input
            v-show="scope.row.edit"
            v-model="scope.row.value"
            @blur="switchEdit(scope.row)"
          ></el-input>
          <p v-show="!scope.row.edit" @click="switchEdit(scope.row)">
            {{ scope.row.value }}
          </p>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { reactive } from "vue";
import { updateInfo } from "../api/userAPI";

const userDetail = reactive([]);
const props = defineProps({
  userInfo: {},
});
const switchEdit = (row) => {
  row.edit = !row.edit;
  if (!row.edit) {
    const updateObj = {};
    updateObj[translate(row.key)] = row.value;
    updateInfo(updateObj).then((data) => {
      if (data.success) {
        ElMessage.success(data.message);
      } else {
        ElMessage.error(data.message);
      }
    });
  }
};
const translate = (name) => {
  switch (name) {
    case "gender":
      return "性别";
    case "性别":
      return "gender";
    case "birthDay":
      return "生日";
    case "生日":
      return "birthDay";
    default:
      return;
  }
};
onMounted(() => {
  Object.keys(props.userInfo).forEach((key) => {
    const name = translate(key);
    if (name) {
      userDetail.push({
        key: name,
        value: props.userInfo[key],
      });
    }
  });
});
</script>

<style lang="scss" scoped></style>
